<template>
  <!-- 字典列表 -->
  <el-table
    v-loading="loading"
    :data="dictList"
    border
    stripe
    highlight-current-row
    class="base-table"
    @row-click="$emit('select', $event)"
    :row-class-name="getRowClassName"
  >
    <!-- 字典名称列 -->
    <el-table-column prop="name" label="字典名称" align="center" show-overflow-tooltip />

    <!-- 字典类型列 -->
    <el-table-column prop="type" label="字典类型" align="center" show-overflow-tooltip />

    <!-- 状态列 -->
    <el-table-column prop="status" label="状态" align="center">
      <template #default="{ row }">
        <el-switch
          :model-value="row.status"
          @change="handleStatusChange($event, row)"
          inline-prompt
          active-text="正常"
          inactive-text="停用"
          :loading="row.statusLoading"
        />
      </template>
    </el-table-column>

    <!-- 操作列 -->
    <el-table-column fixed="right" label="操作" width="120" align="center">
      <template #default="{ row }">
        <!-- 编辑按钮 -->
        <el-tooltip content="编辑字典" placement="top" effect="light">
          <el-button type="primary" link icon="Edit" @click.stop="$emit('edit', row)" />
        </el-tooltip>

        <!-- 删除按钮 -->
        <el-popconfirm
          title="确定要删除该字典吗？"
          confirm-button-text="确定"
          cancel-button-text="取消"
          icon="Warning"
          icon-color="#ff4949"
          :title-style="{ color: '#1e293b', fontSize: '14px', fontWeight: 500 }"
          @confirm="handleDelete(row)"
        >
          <template #reference>
            <el-button @click.stop type="danger" link icon="Delete" />
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
  import { useDictApi } from '@/api/dict-api.js';

  const dictApi = useDictApi();

  // 定义组件属性
  const props = defineProps({
    // 加载状态
    loading: Boolean,
    // 字典列表数据
    dictList: Array,
    // 当前选中的字典
    currentDict: Object,
  });

  // 定义组件事件
  const emit = defineEmits(['select', 'edit', 'refresh']);

  /**
   * 获取行的类名
   * @param {Object} param0 包含当前行数据的对象
   * @returns {string} 行的类名
   */
  const getRowClassName = ({ row }) => {
    return row === props.currentDict ? 'selected-row' : '';
  };

  /**
   * 删除字典
   * @param {Object} row 要删除的字典行
   */
  const handleDelete = async (row) => {
    try {
      await dictApi.deleteDict(row.dictId);
      ElMessage.success('删除成功');
      emit('refresh');
    } catch (error) {
      ElMessage.error('删除失败: ' + error.message);
    }
  };

  /**
   * 修改字典状态
   * @param {boolean} status 新的状态值
   * @param {Object} row 要修改的字典行
   */
  const handleStatusChange = async (status, row) => {
    try {
      row.statusLoading = true;
      row.status = status;
      const res = await dictApi.updateDict(row);
      ElMessage.success(res.message);
      emit('refresh');
    } catch (error) {
      ElMessage.error('状态修改失败: ' + error.message);
      row.status = !status; // 恢复原状态
    } finally {
      row.statusLoading = false;
    }
  };
</script>

<style lang="scss" scoped>
  .selected-row {
    background-color: #f0f9ff !important;
  }
</style>
@/api/dict-api